<template>
	<view class="page-box">
		<view class="page-header">
			<view class="left-icon">
				<u-icon name="arrow-leftward" color="#fff" size="26" @click="goBack"></u-icon>
			</view>
			<view class="right-icon">
				<u-icon name="checkmark" color="#fff" size="26" @click="submitAdd"></u-icon>
			</view>
			<view class="tabList">
				<view :class="index === checkTabsIndex ? 'tabItem active' : 'tabItem'" v-for="(item, index) in tabList"
					:key="item.name" @click="changeTabs(index)">
					{{item.name}}
				</view>
			</view>
			<view class="category-money">
				<view class="category">
					<view v-if="checkItem" style="color: #fff;font-size: 34px" :class="`iconfont ${checkItem.icon}`"></view>
					<text v-if="checkItem" class="category-name">{{checkItem.name}}</text>
				</view>
				<view class="money">
					<u--text mode="price" align="right" :text="money" size="28"
						color="#fff"></u--text>
				</view>
			</view>
		</view>
		<view class="page-content">
				<u-grid :border="false" col="4" style="margin: 20rpx 0">
					<u-grid-item v-for="(item, index) in  checkTabsIndex === 0 ? payList : incomeList" :key="item.id" @click="clickCategory(item, index)" style="margin-bottom: 30rpx">
						 <view 
						  :style="index === categoryIndex ? 'color: rgb(118,149,232)' : 'color: #999;'"
						  :class="index === categoryIndex ? `iconfont ${item.icon} active` : `iconfont ${item.icon}`"></view>	
						 <text :class="index === categoryIndex ? 
						  'grid-text active-text' : 'grid-text'">{{item.name}}</text>
					</u-grid-item>
				</u-grid>
				

				<u-modal :show="showModal" style="z-index: 99999;" width="270px" title=""
				 @confirm="confirm" :showCancelButton="true" confirmText="确定" cancelText="返回"
					@cancel="cancel" confirmColor="rgb(122,155,234)">
					<view slot="default">
						<rich-text :nodes="content" style="color: #606266"></rich-text>
					</view>
				</u-modal>
			
		</view>
		<view class="footer">
		<u-keyboard mode="number" :overlay="false" :tooltip="false" 
			@change="keyboardChange" @backspace="backspace" :show="showKeyboard">
			<view slot="default" class="footer-setting">
				
				<view class="setting-item" style="margin-bottom: 20rpx;">
					<view class="label">日期</view>
					<view class="value" @click="showCalendar = true">
						<view class="date">
							{{$u.timeFormat(time, 'mm月dd日')}}
						</view>
						<view class="icon">
							<u-icon size="14" color="#999" name="arrow-down-fill"></u-icon>
						</view>
					</view>
				</view>
				<view class="setting-item">
					<view class="label">支付方式</view>
					  <u-radio-group
					    v-model="pay_method"
					    placement="row"
					  >
					    <u-radio
					      :customStyle="{marginRight: '8px'}"
					      v-for="item in payMethodList"
						  activeColor="rgb(119,150,233)"
						  shape="circle"
					      :key="item.id"
					      :label="item.name"
					      :name="item.id"
					    >
					    </u-radio>
					  </u-radio-group>
				</view>
			
				<view class="setting-item">
					<view class="label">备注</view>
					<u--textarea height="100" :autoHeight="true" v-model="remark" border="bottom" placeholder="请输入备注" autoHeight ></u--textarea>
				</view>
			</view>
			</u-keyboard>	
			<u-calendar :show="showCalendar" :minDate="minDate" :monthNum="12" :maxDate="maxDate" 
			 color="rgb(119,150,233)" :closeOnClickOverlay="true" title="请选择日期"
			@confirm="confirmCalendar" @close="closeCalendar"></u-calendar>
		</view>	
		
		
	</view>
</template>

<script>
	import { addBill } from '@/api/bill.js'
	import { getCategoryList } from '@/api/category.js'
	export default {
		data() {
			return {
				tabList: [{
						name: '支出'
					},
					{
						name: '收入'
					},
				],
				payMethodList: [
					{id: 1, name: '微信'},
					{id: 2, name: '支付宝'},
					{id: 3, name: '银行卡'},
					{id: 4, name: '现金'},
				],
				checkTabsIndex: 0,
				showKeyboard: true,
				value: '',
				showModal: false,
				content: `
				<div style="display: flex;align-items: center;padding-bottom: 8px">
				<img style="width: 70px" src="https://s2.loli.net/2022/06/25/ypAiwo12WEdqMrv.png"/>
				<div style="color: rgb(122,155,234); font-size: 20px;"> 添加成功 </div>
				</div>
				<div style="color: #666;text-align:center">是否继续添加?</div>`,
				categoryIndex: null,
				checkItem: null,
				remark: '',
				pay_method: null,
				showCalendar: false,
				time: Date.now(),
				minDate: null,
				maxDate: Date.now(),
				payList: [],
				incomeList: []
			}
		},
		computed: {
			money() {
				return Number(this.value)
			}
		},
		onLoad() {
			this.minDate = uni.$u.timeFormat(`${new Date().getFullYear()}-01-01`, 'yyyy-mm-dd');
			this.fetchCategory()
		},
		methods: {
			async fetchCategory() {
				const rsp = await getCategoryList()
				if(rsp.code === 0) {
					this.categoryList = rsp.data.list
					if(rsp.data.list.length > 0) {
						this.payList = rsp.data.list.filter(item => item.flag === 'pay')
						this.incomeList = rsp.data.list.filter(item => item.flag === 'income')
					}
				}
			},
			changeTabs(index) {
				this.checkTabsIndex = index
				this.value = 0
				this.checkItem = null
				this.categoryIndex = null
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			keyboardChange(val) {
				if (this.value.length > 7) return
				this.value += val;
			},
			backspace() {
				// 删除value的最后一个字符
				if (this.value.length) this.value = this.value.substr(0, this.value.length - 1);
			},
			async submitAdd() {
				if (!this.value) {
					uni.showToast({ title: '请输入金额', icon: 'none' });
					return
				}
				if (!this.categoryIndex && this.categoryIndex !== 0) {
					uni.showToast({ title: `请选择${this.checkTabsIndex === 0 ? '支出' : '收入'}分类`, icon: 'none' });
					return
				}
				if (!this.pay_method) {
					uni.showToast({ title: '请选择支付方式', icon: 'none' });
					return
				}
				const data = {
					category_id: this.checkItem.id,
					record_time: this.$u.timeFormat(this.time),
					cost: this.value,
					remark: this.remark,
					pay_method: this.pay_method,
					flag: this.checkTabsIndex === 0 ? 'pay' : 'income'
				 }
				const rsp = await addBill(data)
				 if(rsp.code === 0) {
					this.showModal = true
				 }
				
			},
			confirm() {
				this.showModal = false
				this.value = ''
				this.checkItem = null
				this.categoryIndex = null
				this.remark = null
				this.pay_method = null
			},
			cancel() {
				this.goBack()
			},
			clickCategory(item, index) {
				this.categoryIndex = index
				this.checkItem = item
			},
			confirmCalendar(time) {
				this.time = time[0]
				this.showCalendar = false
			},
			closeCalendar() {
				this.showCalendar = false
			}
		}
	}
</script>
<style lang="scss">
.u-keyboard {
	background-color: #f3f7f9 !important;
}
.u-keyboard__button-wrapper__button--gray {
    background-color: #e8e5e5 !important;
}
</style>
<style lang="scss" scoped>
	.page-box {
		position: relative;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		height: 100vh;
		.page-header {
			width: 100%;
			height: 300rpx;
			background: -webkit-linear-gradient(to right, #8f94fb, #4e54c8);
			/* Chrome 10-25, Safari 5.1-6 */
			background: linear-gradient(to right, #8f94fb, #4e54c8);
			/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
			position: relative;

			.left-icon {
				padding: 110rpx 0 0 50rpx;
			}

			.right-icon {
				position: absolute;
				top: 110rpx;
				right: 50rpx;
			}

			.tabList {
				position: absolute;
				top: 100rpx;
				left: 50%;
				transform: translate(-50%, 0);
				display: flex;
				align-items: center;
				justify-content: center;

				.tabItem {
					color: #9BA8E8;
					font-size: 32rpx;
					padding: 0 60rpx;
				}

				.active {
					margin-top: 10rpx;
					color: #fff;

					&::after {
						content: '';
						display: block;
						margin-top: 10rpx;
						background: #fff;
						width: 100%;
						height: 2px;
						border-radius: 2px;
					}
				}
			}

			.category-money {
				display: flex;
				align-items: center;
				justify-content: space-around;
				padding: 35rpx 20rpx;

				.category {
					flex: 1;
					display: flex;
					align-items: center;

					.category-name {
						padding-left: 10rpx;
						color: #fff;
						font-size: 16px;
						font-weight: 500;
					}
				}

				.money {
					flex: 1;
				}
			}
		}

		.page-content {
			flex: 1;
			overflow: auto;
			padding: 20rpx;
			.iconfont {
				font-size: 30px;
			}
			.grid-text {
				color: #999;
			}
			.active {
				color: rgb(118,149,232);
			}
			.active-text {
				color: rgb(118,149,232); 
			}
		}

		.footer {
			position: fixed;
			.footer-setting {
				padding-top: 25rpx;
				background-color: #f3f7f9;
			}
			.first-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				
			}
			.setting-item {
				color: #999;
				display: flex;
				// align-items: center;
				margin-bottom: 20rpx;
				padding: 0 20rpx;
				.label {
					width: 150rpx;
					color: #666;
				}
				.value {
					display: flex;
					align-items: center;
					background-color: #F5F5F5;
					border-radius: 8rpx;
					padding: 10rpx 15rpx;
					.date {
						color: #999;
						margin-right: 10rpx;
					}
				}
			}
		}

	}
</style>
